@import 'vars.styl'

table-border = 1px solid #bdc6cf
table-color = #a0a8ae
table-thead-th-background = #f8fafc
table-td-border = 1px solid #e7ecf1
table-sort-background = url(../img/icon_sort.png)
table-tfoot-background = #e7ecf1

page-active-color = #676f75
page-active-background = #fff

page-button = first prev next last

.table
  width: 100%
  font-size: 13px
  border: table-border
  propPrefix(box-shadow, #bdc6cf 0 0px 3px)
  table
    width: 100%
    border-spacing: 0
    td
      margin: 0
      padding: 0
      height: 40px
    thead
      td
        border-bottom: table-border
        valuePrefix(background, linear-gradient(top, #fff 0%, #f3f5f7 100%))
      th
        height: 40px
        font-weight: normal
        color: table-color
        background: table-thead-th-background
        border-bottom: table-td-border
      .table-sort
        display: inline-block
        width: 16px
        height: 16px
        margin-left: 2px
        vertical-align: -3px
        cursor: pointer
        background: table-sort-background
      .head
        width: 100%
    tbody
      td
        color: table-color
        text-align: center
        border-bottom: table-td-border
      tr:last-of-type td
        border-bottom: 0
    tfoot
      background: table-tfoot-background
      td
        height: 50px
        border-top: table-border

.page
  float: right
  margin: 0 20px 0 0
  padding: 0
  list-style: none
  border: table-border
  propPrefix(box-shadow, #BDC6CF 0 0 1px)
  valuePrefix(background, linear-gradient(top, #fff 0%, #E0E4E8 100%))
  li
    float: left
    width: 18px
    height: @width
    line-height: @height
    margin-left: -1px
    padding: 4px
    text-align: center
    border-left: table-border
    font-size: 13px
    color: table-color
    cursor: pointer
    &:active,
    &.active
      color: page-active-color
      background-color: page-active-background
      cursor: default
      propPrefix(box-shadow, inset #bdc6cf 0 1px 3px)
  for btn in page-button
    .page-{btn}
      background: 'url(../img/page_%s.png) no-repeat center center' % (btn)

